<template>
	<view class="page">
		<u-gap height="30"></u-gap>
		<view class="box margin0 flex flex-wrap">
			<view class="tutorial" v-for="(item, index) in list" :key="index" @click="$tools.router('../play', item.url)">
				<image :src="`https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/${ index % 3 + 1 }.png`"></image>
				<view class="title absolute-auto padding-row10">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: [],
			}
		},
		async onLoad() {
			await this.getList()
		},
		
		methods: {
			// 获取用户案例
			async getList(){
				const res = await this.$request("/shuziren/videoTutorial", {}, "GET")
				if(res.code===200) {
					this.list = res.data
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: 690rpx;
		.tutorial {
			width: 216rpx;
			height: 264rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			image {
				width: 100%;
				height: 100%;
			}
			.title {
				width: 100%;
				font-family: myfont;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
			}
		}
		.tutorial:nth-child(3) {
			margin-right: 0;
		}
	}
</style>